<template>
  <div class="set-permission">
    <el-row class="flex">
      <div class="flex">
        <fa-icon class="puser-incon fa-user-circle" />
      </div>
      <div class="user-info">
        <div class="flex">
          <div class="user-name">{{roleData.roleName}}</div>
        </div>
        <div class="org-role">{{roleData.roleDesc||'暂无相关描述'}}</div>
      </div>
      <div class="header-btn">
<!--        <el-button size="small" plain @click="AddUserDialog=true">-->
<!--          <fa-icon class="fa-plus" />添加人员</el-button>-->
<!--        <stop-role-button :roleData="userData" title="停用职务" v-show="userData.roleStatus === 'OPEN'" @uppdataSuccess="uppdataRole" />-->
<!--        <open-role-button :roleData="userData" title="启用职务" v-show="userData.roleStatus === 'CLOSE'" @uppdataSuccess="uppdataRole" />-->
<!--        <copy-button :role-data="userData" title="复制职务" @uppdataSuccess="uppdataRole" />-->
        <delete-button :role-data="userData" title="删除职务" @uppdataSuccess="uppdataRole" />
      </div>
    </el-row>
    <el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="操作权限" name="operate">
          <operate-permission ref="operatePermissionDom" :role-id="roleData.roleId" @uppdataSuccess="uppdataSuccess" />
        </el-tab-pane>
        <el-tab-pane label="数据权限" name="data">
          <data-permission ref="dataPermissionDom" :role-data="userData" @uppdataSuccess="uppdataSuccess" />
        </el-tab-pane>
        <el-tab-pane label="成员列表" name="user">
          <user-list :userData="userData.userList" />
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row style="margin: 20px 0;text-align: center;" v-show="activeName !== 'user'">
      <el-button type="primary" size="small" @click="submit">
        <fa-icon class="fa-check" />保存</el-button>
    </el-row>
    <el-dialog title="添加人员" :visible.sync="AddUserDialog" width="60%" append-to-body :close-on-click-modal="false">
      <add-user :roleId="roleData.roleId" />
    </el-dialog>
  </div>
</template>

<script>
import OperatePermission from './OperatePermission'
import DataPermission from './DataPermission'
import UserList from './UserList'
import AddUser from './AddUser'
import StopRoleButton from './StopRoleButton'
import OpenRoleButton from './OpenRoleButton'
import CopyButton from './CopyButton'
import DeleteButton from './DeleteButton'
import { CONSTANT_OBJ } from '@/utils/constant'
import api from '../api'
export default {
  components: { OperatePermission, DataPermission, UserList, AddUser, StopRoleButton, OpenRoleButton, CopyButton, DeleteButton },
  props: { roleData: Object },
  data () {
    return {
      activeName: 'operate',
      AddUserDialog: false,
      editUserData: {},
      userData: {}
    }
  },
  mounted () {
    this.getUserData()
  },
  methods: {
    // 请求数据
    getUserData () {
      api.getRoleDetailData(this.roleData.roleId).then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.userData = data || {}
          this.$emit('updateList')
        }
      })
    },
    submit () {
      if (this.activeName === 'operate') {
        this.$refs.operatePermissionDom.submit()
      } else if (this.activeName === 'data') {
        this.$refs.dataPermissionDom.submit()
      }
    },
    // 停用更新数据
    uppdataRole (val) {
      console.log(val, '删除职务')
      if (val === 'delete') {
        this.$emit('uppdataSuccess', 'set')
      } else {
        this.getUserData()
      }
    },
    uppdataSuccess () {
      this.$emit('uppdataSuccess', 'set')
    },
    handleClick () {

    }
  }
}
</script>

<style lang="less" scoped>
.set-permission {
  .user-info {
    margin-left: 20px;
  }
  .user-name {
    font-weight: bold;
    font-size: 16px;
  }
  .user-status {
    margin-left: -10px;
  }
  .org-role {
    margin-top: 10px;
  }
  .puser-incon {
    font-size: 48px;
    color: rgba(255, 106, 0, 1);
  }
  .header-btn {
    position: absolute;
    right: 20px;
  }
}
</style>
